<template>
    <div class="works-box w1200" v-loading="loading">
            <h1 style="text-align: center;font-size: 24px;margin: 30px 0;">参赛作品</h1>
            <div class="content-box-row clearfix" v-for='(item,index) in newDataList' :key='index'>
              <template v-if='item.length == 4'>
                <div class="content-box-sub cur" v-for='(items,sindex) in item' :key='items.articleId' @click="entriesdetails(items)">
                  <div class="content-img-box">
                    <img :src="items.articleImg" alt="">
                    <div>
                      {{items.worksId}}
                    </div>
                  </div>
                  <div class="msg-box">
                    <div><img src="../../assets/images/dwmc.png" alt=""><span>队伍名称：<em class="grey">{{items.teamName | stringLengthWork}}</em></span></div>
                    <div><img src="../../assets/images/csdw.png" alt=""><span>参赛单位：<em class="grey">{{items.participatingUnits | stringLengthWork}}</em></span></div>
                    <div><img src="../../assets/images/tdcy.png" alt=""><span>团队成员：<em class="grey">{{items.teamMember | stringLengthWork}}</em></span></div>
                    <div><img src="../../assets/images/cstm.png" alt=""><span>赛题名称：<em class="grey">{{items.worksName | stringLengthWork}}</em></span></div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="content-box-sub cur" v-for='(items,sindex) in item' :key='items.articleId' @click="entriesdetails(items)">
                  <div class="content-img-box">
                    <img :src="items.articleImg" alt="">
                    <div>
                      {{items.worksId}}
                       <!-- | returnIndex -->
                    </div>
                  </div>
                  <div class="msg-box">
                    <div><img src="../../assets/images/dwmc.png" alt=""><span>队伍名称：<em class="grey">{{items.teamName | stringLengthWork}}</em></span></div>
                    <div><img src="../../assets/images/csdw.png" alt=""><span>参赛单位：<em class="grey">{{items.participatingUnits | stringLengthWork}}</em></span></div>
                    <div><img src="../../assets/images/tdcy.png" alt=""><span>团队成员：<em class="grey">{{items.teamMember | stringLengthWork}}</em></span></div>
                    <div><img src="../../assets/images/cstm.png" alt=""><span>赛题名称：<em class="grey">{{items.worksName | stringLengthWork}}</em></span></div>
                  </div>
                </div>
                <div class="null" v-for='(items,sindex) in 4-item.length' :key='sindex'></div>
              </template>
            </div>
            <div class='load-button'>
              <!-- <el-button type="primary" @click='addDataList()' v-if='buttonFlag'>加载更多+</el-button> -->
              <!-- v-if='buttonFlag' -->
              <!-- v-else -->
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage3"
                :page-size="pageSize"
                layout="prev, pager, next, jumper"
                :total="total">
              </el-pagination>
              <!-- <p style="color:#bbb;" >已经到底，没有更多数据了！</p> -->
            </div>
            
          </div>
</template>
           
<script>
export default{
      data() {
      return {
        dataList:[],
        newDataList:[],
        propDataList:[],
        str:'张某某、李某、李某、王sss',
        indexNum:0,
        pageSize:12,
        pageNum:1,
        buttonFlag:true,
        loading:true,
        currentPage3:1,
        total:12,
      }
    },
    // props:{
    //   ppData:{
    //     type:Array,		///type: [String, Number],
    //     default:null
    //   }
    // },
    // computed:{
    //   isShow() {
    //     return this.ppData;
    //   }
    // },
    // watch:{
    //   isShow:{
    //     handler(newv,oldv){
    //       this.dataList = newv
    //       this.newRow(this.dataList)
    //     },
    //     deep:true,
    //     immediate:true,
    //   }
    // },
    methods: {
      handleSizeChange(val) {
      },
      handleCurrentChange(val) {
        this.pageNum = val
        this.getParticipatingWorksList()
      },
      returnIndex(){
        this.indexNum +=1
        
        return this.indexNum
      },
      row(number){
        let row = parseInt(number/3)
        this.remainder = number%3
        return row
      },
      newRow(dataList){
        this.newDataList = []
        for(var i=0;i<dataList.length;i+=4){
              this.newDataList.push(dataList.slice(i,i+4));
          }
          return this.newDataList
      },
      addDataList(){
        this.pageNum +=1
        this.getParticipatingWorksList()
      },
      entriesdetails(item){
        this.$store.commit('workDetail',item.articleId)
        this.$store.commit('setDetailName',item.teamName)
        this.$store.commit('showDetail',true)
      },
      async getParticipatingWorksList(){
        this.loading = true
        let datalist = await this.API.getParticipatingWorksList({
          pageSize:this.pageSize,
          pageNum:this.pageNum
        })
        let res = datalist.rows
        let data = JSON.parse(JSON.stringify(res))
        let index = 0
        data.forEach(val =>{
          index +=1
          val['indexkey'] = index
        })
        this.newRow(data)
        // this.dataSort(data)
        // this.pushData(data)
        this.total = datalist.total
        // if(datalist.total == this.dataList){
        //   this.buttonFlag = false
        // }else{
        //   if(res.length<this.pageSize){
        //     this.buttonFlag = false
        //   }else{
        //     this.buttonFlag = true
        //   }
        // }
        this.loading = false
      },
      pushData(res){
        this.dataList = [...this.dataList,...res]
        let index = 0
        this.dataList.forEach(val =>{
          index +=1
          val['indexkey'] = index
        })
        this.newRow(this.dataList)
      },
      dataSort(data){
        data.sort(function(x, y){
          return x['orderNum']-y['orderNum'];
        });
      }
      
      
    },
    mounted() {
      this.getParticipatingWorksList()

    },       
}
</script>
<style lang='scss' scoped>
            .works-box{
              .grey{
                color:#aaa;
              }
            // width: 100%;
            // overflow: hidden;
            // background-color: #cccc;
            // display: flex;
            .content-box-row{
                // display: flex;
                // flex: 4;
               .content-box-sub{
                  // flex:1;
                  // width: 380px;
                  float: left;
                  width: 270px;
                  height: 415px;
                  // background-color: pink;
                  margin-right:30px; 
                  margin-bottom: 30px;
                  border-bottom: 2px solid #ccc;
                  .content-img-box{
                    width: 100%;
                    height:218px;
                    position: relative;
                    img{
                      width: 100%;
                      height: 100%;
                    }
                    div{
                      position: absolute;
                      top: 0;
                      left: 0;
                      background-color: #3246c4;
                      color: #fff;
                      padding: 15px 25px;
                    }
                  }
                    .msg-box{
                      &>div{
                        display: flex;
                        align-items: center;
                        padding: 10px 0;
                        img{
                          width: 16px;
                          margin-right: 10px;
                          margin-left: 5px;
                        }
                      }
                    }
              }
              .content-box-sub:hover{
                border-bottom: 2px solid #3246c4;
                transform: translate(2px,-2px);
                box-shadow: -4px 9px 20px 2px rgba(0,0,0,0.3);
                transition: all .2s;
                .msg-box-h1{
                  color: #3246c4;
                }
              }
              .content-box-sub:last-child{
                margin-right:0px;
              }
              .null{
                  width: 270px;
                  height: 335px;
                  // width: 380px;
                  min-height: 300px;
                  // background-color: green;
                  margin-right:10px; 
                  margin-bottom: 10px;
              }
            }
         
        }
        .load-button{
          width: 100%;
          text-align: center;
          margin: 25px 0;
        }
</style>